import {Fragment, useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import {getAllArticlePageUrl} from "@/api/blog/article.ts";
import {WholePage, WholePageContent, WholePageHeader} from "@/layout/Page";
import {Button, Flex, Space, Table, Tag} from "antd";
import dictTag from "@/components/DictTag";
import {PlusOutlined} from "@ant-design/icons";
import useGetDict from "@/hooks/useGetDict.ts";
import {DndContext, DragEndEvent, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
import {arrayMove, SortableContext, verticalListSortingStrategy,} from '@dnd-kit/sortable';
import {restrictToVerticalAxis} from '@dnd-kit/modifiers'


export default function DetailPage() {


    const dictData = useGetDict("art_tag")

    const {bcId} = useParams();
    // 获取 url ？ 后面的参数
    const params = new URLSearchParams(window.location.search);

    const [loading, setLoading] = useState(false)

    const columns: any = [
        {title: "编号", minWidth: 60, dataIndex: "artId", ellipsis: true, align: "center"},
        {title: "文章名称", minWidth: 160, dataIndex: "artTitle", ellipsis: true, align: "center"},
        {
            title: "文章标签",
            minWidth: 90,
            dataIndex: "artTag",
            align: "center",
            ellipsis: true,
            render: (text: any = "") => {
                if (!text) return <>-</>
                const tagList = text.split(",") || []
                return tagList.map((item: any, index: number) => {
                    return <Tag key={index}>{dictTag(dictData.art_tag, item)}</Tag>
                })
            }
        },
        {title: "排序", minWidth: 90, dataIndex: "sort", align: "center"},
        {
            title: "状态",
            minWidth: 90,
            dataIndex: "status",
            align: "center",
            render: (text: any) => {
                return text === 0 ? <Tag color={"warning"}>未发布</Tag> : <Tag color={"success"}>已发布</Tag>
            }
        },
        {title: "创建时间", minWidth: 160, dataIndex: "createTime", ellipsis: true, align: "center"},
    ];

    const [data, setData] = useState<any>([]);
    useEffect(() => {
        // 通过 分类 id 获取分类下面的全部文章信息
        getAllArticlePageUrl({
            artCategoryId: bcId
        }).then((res: any) => {
            console.log("通过 分类 id 获取分类下面的全部文章信息 res", res)
            setData(res.data)
        })
    }, [bcId]);


    const sensors = useSensors(
        useSensor(PointerSensor, {
            activationConstraint: {
                // https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints
                distance: 1,
            },
        }),
    );

    const onDragEnd = ({ active, over }: DragEndEvent) => {
        if (active.id !== over?.id) {
            setData((prev: any) => {
                const activeIndex = prev.findIndex((i: any) => i.key === active.id);
                const overIndex = prev.findIndex((i: any) => i.key === over?.id);
                return arrayMove(prev, activeIndex, overIndex);
            });
        }
    };

    return <WholePage>
        <WholePageHeader title={"专栏集合"} to={"/blog/category"}/>
        <WholePageContent>
            <Flex gap="small" vertical>
                <Flex align="center" gap="small">
                    <Button icon={<PlusOutlined/>} type="primary">保存排序</Button>
                    <Space>
                        <Tag>专栏名称: {params.get("bcName")}</Tag>
                    </Space>
                </Flex>
                <DndContext sensors={sensors} modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
                <SortableContext
                    // rowKey array
                    items={data.map((i: any) => i.key)}
                    strategy={verticalListSortingStrategy}
                >
                    <Table
                        rowKey="artId"
                        loading={loading}
                        tableLayout="auto"
                        dataSource={data}
                        columns={columns}
                        scroll={
                            {x: 'auto'}
                        }
                        pagination={false}
                    >
                    </Table>
                </SortableContext>
                </DndContext>
            </Flex>
        </WholePageContent>
    </WholePage>

}
